<template>
  <div class="tagIndex">
    <p class="tagSpan" v-if="hasTag"></p>
    <p :class="{'tagTitle':hasTag,'blodTag':!hasTag}" class="tagTitle">{{title}}</p>
    <more v-if="hasMore" :moreUrl="moreUrl" :title="title"></more>
<!--    <P class="more" v-if="hasMore">-->
<!--      更多&nbsp;&nbsp;>>-->
<!--    </P>-->
  </div>
</template>
<script>
  import more from "./more";
  export default {
    data(){
      return{

      }
    },
    components:{
      more,
    },
    name:'tagTitle',
    props:{
      title:String,
      hasTag:Boolean,
      hasMore:Boolean,
      moreUrl: String,
    },
    methods: {
      whichList(){

      }
      // toMoreList() {
      //   this.$router.push({path: this.moreUrl});
      // }
    }
  }
</script>
<style lang="scss" scoped>
  .tagIndex{
    display: flex;
    align-items: center;
    position: relative;
    .tagSpan{
      width: 4Px;
      height: 14Px;
      background: #1c7df0;
      margin-right: 8px;
    }
    .tagTitle{
      font-size: 16Px;
      font-weight: 600;
      color: #11212F;
      line-height: 22px;
    }
    .blodTag{
      font-size: 14Px;
      font-weight: 600;
      color: #11212F;
      line-height: 15px;
    }
    .more{
      position: absolute;
      right: 0;
      font-size: 13Px;
      font-weight: 400;
      color: #7B838A;
      line-height: 14px;
      cursor: pointer;
    }
  }
</style>
